'use client'

import { useState } from 'react'
import { cn } from '@/lib/css/util'

export function UniqueSelected() {

    const titles = ['Home', 'About', 'Contact'];
    const [selected, setSelected] = useState(0);

    return(
        <div className={'p-10 h-screen bg-black'}>
            <ul className={'flex gap-5'}>
                {
                    titles.map((title,index) => (
                        <li key={title}
                            className={cn('bg-rose-500 p-3 cursor-pointer text-white rounded-xl font-mono',index === selected && 'bg-green-500')}
                            onClick={() => setSelected(index)}
                        >
                            {title}
                        </li>
                    ))
                }
            </ul>

        </div>
    )
}
